<template>
    <div class="centerBox">
        <!-- 头部部分 -->
        <div class="flex aic w100p jc-sb" :class="{ 'mt-20': !tableData.inquiry_id }">
            <span class="fwb">{{ tableData.inquiry_id }}</span>
            <span class="ml-20 fwb f14 mr-10">{{ tableData.usa_date_time }}</span>
        </div>
        <div class="w100p flex aic jc-sb mt-5 mb-5">
            <div class="flex aic">
                <el-button @click="add" plain class="new">New</el-button>
                <el-button @click="save" type="success" plain>Save</el-button>
                <el-button @click="orderPopup" type="primary" plain>Add to Order</el-button>
                <el-button @click="rfqPopup" type="primary" plain>From RFQ</el-button>
                <el-button @click="exportButton" type="primary" plain>Excel</el-button> <!--导出按钮 -->
                <el-popconfirm title="Sure to delete?" @confirm="del">
                    <template #reference>
                        <el-button type="primary" plain class="del">Delete</el-button>
                    </template>
                </el-popconfirm>
            </div>
            <div class="flex aic jc-e w100p">
                <el-select v-show="store.type == 2 || store.type == 1" v-model="profit" :disabled="store.type != 2"
                    class="w30p" @change="unifiedProfit" placeholder="Profit">
                    <el-option v-for="item in profitArr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-show="store.type == 3 || store.type == 1" v-model="leading" class="w30p ml-10"
                    @change="unifiedLeading" placeholder="LEADING">
                    <el-option v-for="item in newLeading" :key="item.case" :label="item.label" :value="item.case" />
                </el-select>
            </div>
        </div>

        <div class="flex aic jc-sb mb-10 mt-5">
            <div class="w100p flex aic ">
                <div class="flex aic w40p">
                    <p>Supplier:</p>
                    <el-cascader v-model="tableData.supplierSelect" :disabled="store.type == 4" placeholder="Supplier"
                        @change="changeSupplier" @visible-change="supplier" :options="supplierList" filterable
                        size="small" />
                </div>
                <div class="flex aic ml-20 w50p ">
                    <p>Client:</p>
                    <el-select v-model="tableData.customer_info_id" :disabled="store.type == 4" placeholder="Client"
                        @change="changeClient" :remote-method="client" remote filterable size="small">
                        <el-option v-for="item in clientData" :key="item.id" :label="item.value" :value="item.id" />
                    </el-select>
                </div>
            </div>

            <div class="flex jc-sb w50p">
                <div>
                    <el-dialog v-model="excelDialog" title="Select the required header" width="30%" align-center>
                        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
                            @change="handleCheckAllChange">Check
                            all</el-checkbox>
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="city in cities" :key="city" :label="city">{{
                                city
                            }}</el-checkbox>
                        </el-checkbox-group>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="excelDialog = false">Cancel</el-button>
                                <el-button type="primary" @click="excel">
                                    Confirm
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
            </div>
        </div>
        <!-- 添加到订单弹窗 -->
        <AddOrder ref="order" :newLeading="newLeading" :newCondition="newCondition"></AddOrder>
        <!-- 从询盘而来弹窗 -->
        <fromRfq ref="rfq" :newLeading="newLeading" :newCondition="newCondition" @update="update"></fromRfq>

        <!-- 中间部分 -->
        <div class="boxTable pb-5 bg-fff pl-10 brs">
            <div class="table">
                <p class="tabTitle flex aic pl-10 pt-5 pb-5 f14" style="border-bottom: 1px solid #EBEEF5; color:#909399">
                    <el-checkbox v-model="tabCheckAll" :indeterminate="tabIsIndeterminate"
                        @change="tabHandleCheckAllChange"><br></el-checkbox>
                    <span class="ml-5" style="width: 15.5%;">MODEL</span>
                    <span style="width: 15%;">BRAND</span>
                    <span style="width: 7.5%;">QTY</span>
                    <!-- <span v-if="powerList.inquiry&&powerList.inquiry.inquiry_price.Isdisplay" :class="{ 'w6p': store.type != 4, 'w8p': store.type == 4 }">PRICE</span> -->
                    <span v-if="powerList.inquiry&&powerList.inquiry.inquiry_price.Isdisplay" :class="powerList.inquiry&&powerList.inquiry.inquiry_price.Isdisplay?'w6p':'w8p'">PRICE</span>
                    <span v-if="powerList.inquiry&&powerList.inquiry.inquiry_profit.Isdisplay" style="width: 7%;">Profit</span>
                    <!-- <span v-if="powerList.inquiry&&powerList.inquiry.inquiry_cost.Isdisplay" :class="{ 'w8p': store.type == 3, 'w7p': store.type != 3 }">COST</span> -->
                    <span v-if="powerList.inquiry&&powerList.inquiry.inquiry_cost.Isdisplay" :class="powerList.inquiry&&powerList.inquiry.inquiry_cost.Isdisplay?'w7p':'w8p'">COST</span>
                    <!-- <span
                        :class="{ 'w16p': store.type == 3 || store.type == 4, 'w12p': store.type == 1 || store.type == 2 }">LEADING</span> -->
                    <span
                        :class="powerList.inquiry&&powerList.inquiry.inquiry_price.Isdisplay?'w12p':'w16p'">LEADING</span>
                    <!-- <span :class="{ 'w16p': store.type == 3 || store.type == 4, 'w12p': store.type == 1 || store.type == 2 }">CONDITION</span> -->
                    <span :class="powerList.inquiry&&powerList.inquiry.inquiry_price.Isdisplay?'w12p':'w16p'">CONDITION</span>
                    <span style="width: 6.8%;">BUYER</span>
                    <span class="operation">OPERATION</span>
                </p>
                <el-checkbox-group  v-loading="loading" v-model="tabCheckedCities" @change="rightSelection">
                    <div v-for="table, index in tableData.item" :key="index" @click="clickTable(table)"
                        class="flex bbm jc-c pt-10 pl-10 hoverActive"
                        :class="{ 'active': index == tableData.item.findIndex(item => item.product_id == product_id) }">
                        <div class="flex w40p">
                            <el-checkbox :label="table"><br></el-checkbox>
                            <el-select class="ml-5" v-model="table.product.product_id"
                                :disabled="table.product.quotation_price != '' || !powerList.inquiry.inquiry_model.Isenable" @change="chModel"
                                :remote-method="getModel" remote @visible-change="visible" filterable placeholder="MODEL">
                                <el-option v-for="item in newModel" :key="item.id" :label="item.label" :value="item.id" />
                            </el-select>
                            <el-select v-model="table.brand.brand_id" class=""
                                :disabled="table.product.quotation_price != '' ||!powerList.inquiry.inquiry_brand.Isenable" :remote-method="getBrand"
                                remote @visible-change="visible" filterable placeholder="BRAND">
                                <el-option v-for="item in newBrand" :key="item.id" :label="item.label" :value="item.id" />
                            </el-select>
                            <div class=" w20p">
                                <el-input v-model="table.Qty"
                                    :disabled="table.product.quotation_price != '' || !powerList.inquiry.inquiry_qty.Isenable" placeholder="QTY" />
                            </div>
                        </div>
                        <div class="flex fdc w60p">
                            <div v-for="list in table.purchaser_array" class="flex  pb-10">
                                <div v-show="powerList.inquiry.inquiry_price.Isdisplay" class="w20p">
                                    <el-input v-model="list.quotation_price" :disabled="!powerList.inquiry.inquiry_price.Isenable"
                                        @input="inpPrice($event, list.purchase_price, list)" />
                                </div>
                                <div class="w20p">
                                    <div v-show="powerList.inquiry.inquiry_profit.Isdisplay" class="flex aic">
                                        <el-input v-model="list.profit_rate" :disabled="!powerList.inquiry.inquiry_profit.Isenable"
                                            @input="newSale($event, list.purchase_price, list)" />
                                        <p class="f18">%</p>
                                    </div>
                                </div>
                                <div v-show="powerList.inquiry.inquiry_cost.Isdisplay" class="w20p">
                                    <el-input v-model="list.purchase_price" :disabled="!powerList.inquiry.inquiry_cost.Isenable"
                                        @input="inpCost($event, list.profit_rate, list)" />
                                </div>
                                <el-select class="w40p" v-model="list.leadingtime"
                                    :disabled="!powerList.inquiry.inquiry_leading.Isenable" filterable placeholder="LEADING">
                                    <el-option v-for="item in newLeading" :key="item.label" :label="item.label"
                                        :value="item.case" />
                                </el-select>
                                <el-select class="w40p" v-model="list.product_condition"
                                    :disabled="!powerList.inquiry.inquiry_condition.Isenable" filterable placeholder="CONDITION">
                                    <el-option v-for="item in newCondition" :key="item.label" :label="item.label"
                                        :value="item.case" />
                                </el-select>
                                <div class="buyer w20p">
                                    <el-input v-model="list.name" disabled placeholder="BUYER" />
                                </div>
                                <!-- <div class="w25p">
                                </div> -->
                                <div class="tabDel"
                                    :class="{ 'active': index == tableData.item.findIndex(item => item.product_id == product_id) }">
                                    <el-popconfirm title="Sure to delete?" @confirm="tabDel(list)">
                                        <template #reference>
                                            <el-button type="primary" size="small" plain class="del">Delete</el-button>
                                        </template>
                                    </el-popconfirm>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import * as $axios from '../../../api/index'
import useBrand from '../../../hooks/useBrand'
import useModel from '../../../hooks/useModel'
import { ElMessage } from 'element-plus'
import AddOrder from './components/AddOrder.vue';
import fromRfq from './components/FromRfq.vue';
import { useDemoStore } from '../../../pinia/index'
import usePower from "../../../hooks/usePower";
const store = useDemoStore()
const { powerList } = usePower()

const props = defineProps({
    rfqId: String,
    newLeading: Array,
    newCondition: Array,
})

// 加载
const loading = ref(true)

// 获取供应商信息
const supplierList = ref([])
const supplier = () => {
    const data = {
        token: store.token,
    }
    $axios.$country_customer_list(data).then(res => {
        // console.log(res.data)
        supplierList.value = res.data.map(item => {
            return {
                label: item.name,
                value: item.name,
                children: item.customer.map(items => {
                    return {
                        label: items.firstname,
                        value: items.customer_info_id
                    }
                })
            }
        })
        console.log(supplierList.value)
    })
}

// 选中触发
const supplierId = ref('')
const changeSupplier = (value) => {
    supplierId.value = value[1]
    // console.log(value[1])
}

// 获取客户信息
const clientData = ref([])
const client = (value) => {
    const data = {
        token: store.token,
        keywords: value,
        supplier: "no"
    }
    $axios.$customerCustomer_list(data).then(res => {
        clientData.value = res.data.data.map(item => {
            return {
                value: item.company && item.company.CompanyName,
                id: item.customer_info_id
            }
        })
    })
}
// 选中触发
const clientId = ref('')
const changeClient = (id) => {
    clientId.value = id
}

// 表格列表
const tableData = ref({})
const currency = ref('')
const getTable = () => {
    loading.value = true
    const data = {
        token: store.token,
        inquiry_id: props.rfqId
    }
    $axios.$orderget_order_purchase(data).then(res => {
        console.log(res.data)
        loading.value = false
        tableData.value = res.data
        if (props.rfqId) {
            tableData.value.item.push({  //增加一条空白列
                "Qty": '',
                "product": {
                    "quotation_price": "",
                    "product_id": ''
                },
                "purchaser_array": [{
                    "quotation_price": "",
                    "profit_rate": '',
                    "purchase_price": '',
                    "leadingtime": "",
                    "product_condition": "",
                    "name": ""
                }],
                "index": Math.round(Math.random() * (9000 - 100) + 100),
                "purchase": {
                    "quotation_price": ''
                },
                "brand": {
                    "brand_name": "",
                    "brand_id": ''
                },
            })
        }
        product_id.value = tableData.value.item[0] && tableData.value.item[0].product_id
        model.value = tableData.value.item[0] && tableData.value.item[0].product.model
        currency.value = res.data.quotation_current_rate || 1
        emits('product')
        supplier()
        supplierId.value = ''
        clientId.value = ''
        console.log(tableData.value)
        // console.log(tableData.value)
    })
}

watch(props, () => {
    getTable()
    client()
})


// 获取利润，计算售出价
const getprofit = ref(0)
const newSale = (e, value, data) => {  //获取利润
    getprofit.value = (((e / 100) * (value || 0 * 1) + (value || 0) * 1) * currency.value).toFixed(2)   //计算售出价
    data.quotation_price = getprofit.value
    console.log(e, value)
}


// 获取售出价,计算利润
const newProfit = ref()  //利润
const inpPrice = (e, value, data) => {
    newProfit.value = (((e - value * 1) / value * 1 * 100) * currency.value).toFixed(2)  //计算利润比
    data.profit_rate = value * 1 ? newProfit.value : 0
}

// 获取成本价,计算售出价
const tmoney = ref(0)  //售出价
const inpCost = (e, value, data) => {
    tmoney.value = ((e * ((value || 0) / 100) + e * 1) * currency.value).toFixed(2)  //计算售出价
    data.quotation_price = tmoney.value
    // console.log(e, (value||0 )/ 100)
}

// 全选框
const tabCheckAll = ref(false)
const tabIsIndeterminate = ref(false)
const tabHandleCheckAllChange = (val) => {
    tabCheckedCities.value = val ? tableData.value.item : []
    tabIsIndeterminate.value = false
    rightSelection(tabCheckedCities.value)
}

// 多选框
const tabCheckedCities = ref([])
const id = ref([])
const random = ref([])
const rightSelection = (value) => {
    console.log(value)
    id.value = []
    random.value = []
    tabCheckAll.value = value.length === tableData.value.item.length
    tabIsIndeterminate.value = value.length > 0 && value.length < tableData.value.item.length

    value.forEach(item => {
        if (item.index) {
            random.value.push(item.index)
        } else {
            item.purchaser_array.forEach(arr => {
                id.value.push(arr.inquiry_item_info_id)
            })
        }
    })
    // console.log(id.value)
}

// 点击表格触发事件
const product_id = ref('')
const model = ref('')
const clickTable = (row) => {
    product_id.value = row.product_id
    model.value = row.product.model
    emits('product')
    // console.log(row)
}
// 表格高亮
const rfqList = ({
    row,
    rowIndex,
}) => {
    if (row.product_id === product_id.value) {
        return 'success-row'
    }
    return ''
}

// 新增
const addis = ref(true)
const add = () => {
    if (addis.value) {
        addis.value = false
        tableData.value.customer_info_id = ''
        tableData.value.supplierSelect = []
        save()
        tableData.value.item = []
        for (let i = 0; i < 5; i++) {
            tableData.value.item.push({  //增加空白列
                "Qty": '',
                "msg": 1,
                "product": {
                    "product_id": ''
                },
                "purchaser_array": [{
                    "quotation_price": "",
                    "profit_rate": '',
                    "purchase_price": '',
                    "leadingtime": "",
                    "product_condition": "",
                    "name": ""
                }],
                "purchase": {
                    "quotation_price": ''
                },
                "brand": {
                    "brand_name": "",
                    "brand_id": ''
                },
            })
        }
    }
}

// 保存
const saveState = ref(true)
const save = () => {
    const quotation = ref([])
    const saveData = ref([])
    tableData.value.item.forEach(item => {
        if (item.product.product_id) {
            if (item.product.product_id && item.brand.brand_id) {
                saveState.value = true
                item.purchaser_array.forEach(arr => {
                    saveData.value.push({
                        ...item,
                        ...arr
                    })
                    // console.log(saveData.value)
                    quotation.value = saveData.value.map(item => {
                        return {
                            "inquiry_item_info_id": item.inquiry_item_info_id || '',
                            "quotation_price": item.quotation_price || '',
                            "purchase_price": item.purchase_price || '',
                            "profit_rate": item.profit_rate || '',
                            "product_id": item.product.product_id,
                            "leadingtime": item.leadingtime || '',
                            "product_condition": item.product_condition || '',
                            "brand_id": item.brand.brand_id,
                            "purchaser_id": item.purchaser_id || '',
                            "qty": item.Qty || 0,
                        }
                    })
                })
            } else {
                saveState.value = false
            }
        }
    });
    console.log(quotation.value)
    // console.log(tableData.value.item[0].msg == 1)

    if (quotation.value.length != 0 && saveState.value) {
        const data = {
            token: store.token,
            inquiry_id: tableData.value.item[0].msg == 1 ? '' : props.rfqId,
            quotation: quotation.value,
            supplier_id: supplierId.value || tableData.value.supplierSelect,
            customer_id: clientId.value || tableData.value.customer_info_id,
        }
        if (tableData.value.item[0].msg == 1) { //新建
            $axios.$orderNew_quotation_fun(data).then(res => {
                if (res.Status === 0) {
                    emits('save')
                    addis.value = true
                    profit.value = ''
                    leading.value = ''
                    ElMessage({
                        message: 'Successful preservation',
                        type: 'success',
                    })
                }
                // console.log(tableData.value.item[0].msg)
            })
        } else {
            $axios.$orderSet_quotation(data).then(res => {
                if (res.Status === 0) {
                    tableData.value.item[0].msg == 1 || getTable()
                    profit.value = ''
                    leading.value = ''
                    ElMessage({
                        message: 'Successful preservation',
                        type: 'success',
                    })
                }
                console.log(res)
            })
        }
    } else {
        ElMessage({
            message: 'Please choose model brand',
            type: 'warning',
        })
    }
}


// 删除
const del = () => {
    if (id.value.length != 0 || random.value.length > 0) {
        if (id.value.length != 0) {
            const data = {
                token: store.token,
                inquiry_item_info_id: id.value
            }
            $axios.$orderDel_quotation(data).then(res => {
                if (res.Status === 0) {
                    id.value.forEach(item => {
                        const index = tableData.value.item.findIndex(arr => arr.inquiry_item_info_id == item)
                        index != -1 && tableData.value.item.splice(index, 1)
                    })
                    ElMessage({
                        message: 'Successful preservation',
                        type: 'success',
                    })
                }
                console.log(res)
            })
        }
        if (random.value.length > 0) {
            random.value.forEach(item => {
                const index = tableData.value.item.findIndex(arr => arr.index == item)
                index != -1 && tableData.value.item.splice(index, 1)
            })
        }
    } else {
        ElMessage({
            message: 'Please choose to delete inquiry',
            type: 'warning',
        })
    }

}

// 删除单个采购
const tabDel = (val) => {
    // console.log(val)
    const data = {
        token: store.token,
        inquiry_item_info_id: val.inquiry_item_info_id
    }
    $axios.$orderDel_quotation(data).then(res => {
        if (res.Status === 0) {
            tableData.value.item.forEach(item => {
                const index = item.purchaser_array.findIndex(arr => arr.inquiry_item_info_id == val.inquiry_item_info_id)
                index != -1 && item.purchaser_array.splice(index, 1)
                if (item.purchaser_array.length == 0) {
                    const index = tableData.value.item.findIndex(arr => arr.inquiry_item_info_id == val.inquiry_item_info_id)
                    index != -1 && tableData.value.item.splice(index, 1)
                }
            })

            ElMessage({
                message: 'Successful preservation',
                type: 'success',
            })
        }
    })
}

// 判断有没有选择列，没有选择就提示选择
const excelDialog = ref(false)
const exportButton = () => {
    if (id.value[0]) {
        excelDialog.value = true
    } else {
        ElMessage({
            message: 'Please select a quotation first',
            type: 'warning',
        })
    }
}

// 选择报价表头导出
const checkAll = ref(false)
const isIndeterminate = ref(false)
const checkedCities = ref([])
const cities = ["model", "brand_name", "Qty", "purchase_price", "leadingtime", "product_condition", "quotation_price", "Effective", "Reliability"]

const handleCheckAllChange = (val) => {
    checkedCities.value = val ? cities : []
    isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value) => {
    const checkedCount = value.length
    checkAll.value = checkedCount === cities.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}

// 下载报价
const excel = () => {
    if (checkedCities.value.length != 0) {
        const data = {
            token: store.token,
            inquiry_item_info_id: id.value,
            header: checkedCities.value
        }
        $axios.$orderPull_excel(data).then(res => {
            excelDialog.value = false
            // console.log(res)
            location.assign(res.data)
            // console.log(checkedCities.value)
        })
    } else {
        ElMessage({
            message: 'Please select export',
            type: 'warning',
        })
    }
}


// 利润数据
const profit = ref('')
const profitArr = ref([
    {
        label: '10%',
        value: 10
    },
    {
        label: '15%',
        value: 15
    },
    {
        label: '20%',
        value: 20
    },
    {
        label: '25%',
        value: 25
    },
    {
        label: '30%',
        value: 30
    },
    {
        label: '35%',
        value: 35
    },
    {
        label: '40%',
        value: 40
    },
    {
        label: '45%',
        value: 45
    },
    {
        label: '50%',
        value: 50
    },
])

// 批量更改利润
const unifiedProfit = (data) => {
    tableData.value.item.forEach(item => {
        item.purchaser_array.forEach(arr => {
            if (arr.quotation_price && arr.purchase_price) {
                arr.profit_rate = data
                arr.quotation_price = ((data / 100) * (arr.purchase_price || 0 * 1) + (arr.purchase_price || 0) * 1).toFixed(2)
            }
        })
        // console.log(item)
    })
}

// 批量更改指标
const leading = ref('')
const unifiedLeading = (data) => {
    tableData.value.item.forEach(item => {
        if (item.product.model) {
            item.purchaser_array.forEach(arr => {
                arr.leadingtime = data
            })
        }
        // console.log(item)
    })
}

//model选择框，判断最后一个model有没有值，有就新增一条空白项
const chModel = () => {
    const model = ref('')
    model.value = tableData.value.item[tableData.value.item.length - 1].product.product_id
    if (model.value) {
        tableData.value.item.push({  //增加空白列
            "Qty": '',
            "product": {
                "product_id": '',
                "quotation_price": ''
            },
            "purchaser_array": [{
                "quotation_price": "",
                "profit_rate": '',
                "purchase_price": '',
                "leadingtime": "",
                "product_condition": "",
                "name": ""
            }],
            "index": Math.round(Math.random() * (9000 - 100) + 100),
            "purchase": {

            },
            "brand": {
                "brand_name": ""
            },
        })
    }
}

onMounted(() => {
    getModel(),
        getBrand()
})

// model
var newModel = ref([])
const getModel = (text) => {
    newModel.value = { newModel } = useModel(text)
}

// brand
var newBrand = ref([])
const getBrand = (text) => {
    newBrand.value = { newBrand } = useBrand(text)
}

// 添加到订单弹窗
const order = ref()
const orderPopup = () => {
    order.value.open()
}

// 从询盘而来弹窗
const rfq = ref()
const rfqPopup = () => {
    rfq.value.rfq()
}



//暴露给父组件
defineExpose({
    product_id,
    model
})

const update = () => {
    emits('save')
}

// 暴露product事件
const emits = defineEmits(['product', 'save'])

</script>

<style>
.el-input__inner {
    font-family: 'swis';
}

/* .el-table .cell{
    padding: 0;
} */
</style>

<style lang="less" scoped>
.new.el-button.is-plain {
    border: 1px solid #6193D2;
    color: #6193D2;
    background-color: #fff;
}

.del.el-button.is-plain {
    border: 1px solid #6193D2;
    color: #fff;
    background-color: #6393D4;
}

.el-button.is-plain {
    border: 1px solid #6193D2;
    color: #6193D2;
    background-color: #Ecf5ff;
}

.centerBox {
    .boxTable {
        position: relative;
        height: 46.2vh;
        overflow: hidden;

        .table {
            width: 60vw;

            .active {
                background-color: #F5F7FA;
            }

            .hoverActive:hover {
                background-color: #F5F7FA;
                transition: all 0.1s ease-in;
            }

            .hoverActive:hover .tabDel {
                background-color: #F5F7FA;
                transition: all 0.1s ease-in;
            }
            .tabTitle{
                position: sticky;
                top: 0;
                background-color: #fff;
                z-index: 9;
            }
        }

        .bbm {
            border-bottom: 1px solid #EBEEF5;
        }

        .operation {
            // border: 1px solid red;
            text-align: center;
            width: 92px;
            right: 0%;
            position: sticky;
            background-color: #fff;
        }

        .tabDel {
            // border: 1px solid red;
            width: 100px;
            // height: 38px;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 3px;
            position: sticky;
            display: flex;
            justify-content: center;
            right: 0%;
            background-color: #fff;
            z-index: 5;
        }

    }

    .boxTable:hover {
        overflow: overlay;
        z-index: 3;
    }

    ::-webkit-scrollbar {
        height: 5px;
        width: 5px;
    }

    ::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #C8C9CC;
    }
}

.w8p {
    width: 8.3%;
}

.w6p {
    width: 6.4%;
}

.w7p {
    width: 6.8%;
}

.w9p {
    width: 9%;
}

.w12p {
    width: 12.8%;
}

.w16p {
    width: 16.4%;
}
</style>